<template>
  <a-modal :visible="visible" :footer="false" :closable="false" wrapClassName="c-modal">
    <div class="title">
      <span>{{ title }}</span>
      <span class="iconfont iconguanbi" @click="close"></span>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="btn-div">
      <slot name="botton">
        <a-button type="primary" @click="ok">{{ okText }}</a-button>
      </slot>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Modal, Button } from "ant-design-vue";

@Component({
  name: "CModal",
  components: {
    AModal: Modal,
    AButton: Button
  }
})
export default class CModal extends Vue {
  @Prop({ default: false }) visible!: boolean;
  @Prop({ default: "信息" }) title!: string;
  @Prop({ default: "保存" }) okText!: string;

  private created() {
    // undo
  }

  private close() {
    this.$emit("close");
    this.$emit("update:visible", false);
  }

  private ok() {
    this.$emit("ok");
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
/deep/.c-modal {
  .ant-modal {
    .scale(width, 728px) !important;
  }
  .ant-modal-content {
    border-radius: 2px;
  }
  .ant-modal-body {
    padding: 0;
  }
  .title {
    background-color: #f2f7ff;
    padding: 0px 15px;
    color: #000000;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .iconguanbi {
    color: #b5b4ba;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
  }
  .btn-div {
    .scale(padding, 30px);
    text-align: center;
  }
}
</style>
